<template>
  <div class="login-container">
    <div class="login-from">
      <img src="./book.png" class="book" />
      <div class="from-header">Design Scheme</div>
      <i class="desc">Focus on the design of the background...</i>
      <br />
      <div class="from">
        <el-input placeholder="请输入内容" size="medium" v-model="data.username">
          <template slot="prepend">
            <i class="iconfont iconai-user"></i>
          </template>
        </el-input>
        <el-input
          v-model="data.password"
          placeholder="请输入内容"
          size="medium"
          style="margin-top:20px;"
        >
          <template slot="prepend">
            <i class="iconfont iconchakan"></i>
          </template>
        </el-input>
        <span class="desc">admin账号拥有所有权限|其余没有</span>
        <el-button class="login-btn" @click="handleLogin" :loading="loading">Login</el-button>
      </div>
    </div>
  </div>
</template>


<script>
import { setTimeout } from "timers";
import { tree } from "@/utils/tree.js";
// 遍历菜单树 吧路径让如数组
let bianliArr = []
const bianli = function(arr){
  arr.forEach(el=>{
    bianliArr.push(el.path)
    if(el.children && el.children.length){
      return bianli(el.children)
    }
  })
  return bianliArr
}
// 遍历菜单树 吧按钮放入数组
let btnArr = []
const bianliTree = function(arr){
    arr.forEach(el=>{
      if(el.children){
        if(el.btn){
          btnArr.push(el.name)
        }
        return bianliTree(el.children)
      }
    })
    return btnArr
}

export default {
  data() {
    return {
      loading: false,
      data: {
        username: "admin",
        password: "123456"
      }
    };
  },
  methods: {
    handleLogin() {
      this.loading = true;

      setTimeout(() => {
        window.localStorage.setItem("user", JSON.stringify(this.data));
        let Menutree = bianli(tree)
        window.localStorage.setItem("tree", JSON.stringify(tree)); //存储菜单树数
        window.localStorage.setItem("Menutree", JSON.stringify(Menutree));//把菜单树变成数组存储['/aa'.'/aa','/aa']

        let btnList = bianliTree(tree)
        window.localStorage.setItem("btnList", JSON.stringify(btnList));//把菜单树里面按钮存储['/aa'.'/aa','/aa']
      }, 10);


      setTimeout(() => {
        this.$router.push("/Dashboard");
      }, 500);
    }
  }
};
</script>


<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100%;
  background: url("./login.png") no-repeat;
  position: relative;
  .login-from {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translate(-0%, -50%);
    width: 650px;
    height: 500px;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    .book {
      width: 45px;
      height: 50px;
      position: absolute;
      top: -8px;
      right: 15px;
    }
    .from-header {
      font-size: 38px;
      font-weight: bold;
      text-align: left;
      padding-left: 90px;
      line-height: 80px;
      font-family: "微软雅黑";
      background-image: -webkit-gradient(
        linear,
        0 0,
        0 bottom,
        from(#7af8f3),
        to(#5bc7fa)
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .desc {
      display: inline-block;
      margin-left: 90px;
      font-size: 14px;
      color: #5bc7fa;
    }
    .from {
      width: 70%;
      margin: 50px auto;
      position: relative;

      .el-input-group {
        height: 50px;
      }
      .iconfont {
        display: inline-block;
        width: 18px;
      }
      .login-btn {
        width: 100%;
        outline: none;
        border: none;
        margin: 30px auto;
        height: 50px;
        border-radius: 5px;
        background: linear-gradient(to bottom right, #7af8f3, #5bc7fa);
        cursor: pointer;
        color: #fff;
        font-weight: bold;
        font-size: 24px;
      }
      .desc{
        display: inline-block;
        margin-top:15px;
      }
    }
    .from /deep/ .el-input-group--prepend .el-input__inner,
    .el-input-group__append {
      height: 50px !important;
    }
  }
}
</style>

